<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工仪表板 - 薪资管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>薪资管理系统</h2>
                <p>员工控制台</p>
            </div>
            
            <div class="nav-menu">
                <div class="nav-item active" data-section="overview">
                    <i>📊</i> 个人概览
                </div>
                <div class="nav-item" data-section="profile">
                    <i>👤</i> 个人信息
                </div>
                <div class="nav-item" data-section="salary">
                    <i>💰</i> 工资查询
                </div>
                <div class="nav-item" data-section="attendance">
                    <i>📅</i> 考勤记录
                </div>
                <div class="nav-item" data-section="department">
                    <i>🏢</i> 部门信息
                </div>
            </div>
            
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 个人概览 -->
            <div id="overview" class="content-section active">
                <div class="header">
                    <h1>个人概览</h1>
                    <p>欢迎回来，<span id="employeeName">员工</span>！这里是您的个人信息概览。</p>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <h3>本月工资</h3>
                        <div class="number" id="currentSalary">-</div>
                        <div class="change">实发工资</div>
                    </div>
                    <div class="stat-card">
                        <h3>出勤天数</h3>
                        <div class="number" id="attendanceDays">-</div>
                        <div class="change">本月出勤</div>
                    </div>
                    <div class="stat-card">
                        <h3>请假天数</h3>
                        <div class="number" id="leaveDays">-</div>
                        <div class="change">本月请假</div>
                    </div>
                    <div class="stat-card">
                        <h3>工作年限</h3>
                        <div class="number" id="workYears">-</div>
                        <div class="change">入职时间</div>
                    </div>
                </div>
                
                <div class="content-section">
                    <h2>快速操作</h2>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px;">
                        <button class="btn btn-primary" onclick="showSection('salary')">查看工资</button>
                        <button class="btn btn-success" onclick="showSection('attendance')">考勤记录</button>
                        <button class="btn btn-warning" onclick="showSection('profile')">个人信息</button>
                        <button class="btn btn-primary" onclick="showSection('department')">部门信息</button>
                    </div>
                </div>
            </div>
            
            <!-- 个人信息 -->
            <div id="profile" class="content-section">
                <div class="header">
                    <h1>个人信息</h1>
                    <p>查看和更新您的个人信息。</p>
                </div>
                
                <div class="content-section">
                    <h2>基本信息</h2>
                    <div id="profileInfo">
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
            
            <!-- 工资查询 -->
            <div id="salary" class="content-section">
                <div class="header">
                    <h1>工资查询</h1>
                    <p>查看您的工资发放记录和详细信息。</p>
                </div>
                
                <div class="content-section">
                    <h2>工资记录</h2>
                    <div id="salaryRecords">
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
            
            <!-- 考勤记录 -->
            <div id="attendance" class="content-section">
                <div class="header">
                    <h1>考勤记录</h1>
                    <p>查看您的考勤记录和出勤统计。</p>
                </div>
                
                <div class="content-section">
                    <h2>考勤统计</h2>
                    <div id="attendanceRecords">
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
            
            <!-- 部门信息 -->
            <div id="department" class="content-section">
                <div class="header">
                    <h1>部门信息</h1>
                    <p>查看您所在部门的详细信息。</p>
                </div>
                
                <div class="content-section">
                    <h2>部门详情</h2>
                    <div id="departmentInfo">
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 检查登录状态
        function checkAuth() {
            const token = localStorage.getItem('token');
            const role = localStorage.getItem('role');
            const username = localStorage.getItem('username');
            
            if (!token || role !== 'employee') {
                window.location.href = 'login.html';
            }
            
            // 显示员工姓名
            document.getElementById('employeeName').textContent = username || '员工';
        }
        
        // 页面加载时检查认证
        checkAuth();
        
        // 导航功能
        function showSection(sectionId) {
            // 隐藏所有内容区域
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示选中的内容区域
            document.getElementById(sectionId).classList.add('active');
            
            // 更新导航状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            document.querySelector(`[data-section="${sectionId}"]`).classList.add('active');
            
            // 加载对应数据
            loadSectionData(sectionId);
        }
        
        // 加载区域数据
        function loadSectionData(sectionId) {
            switch(sectionId) {
                case 'overview':
                    loadOverviewData();
                    break;
                case 'profile':
                    loadProfileInfo();
                    break;
                case 'salary':
                    loadSalaryRecords();
                    break;
                case 'attendance':
                    loadAttendanceRecords();
                    break;
                case 'department':
                    loadDepartmentInfo();
                    break;
            }
        }
        
        // 加载概览数据
        async function loadOverviewData() {
            try {
                // 这里应该根据当前登录的员工ID获取数据
                // 简化处理，显示示例数据
                document.getElementById('currentSalary').textContent = '¥8,500';
                document.getElementById('attendanceDays').textContent = '22';
                document.getElementById('leaveDays').textContent = '0';
                document.getElementById('workYears').textContent = '2';
            } catch (error) {
                console.error('加载概览数据失败:', error);
            }
        }
        
        // 加载个人信息
        async function loadProfileInfo() {
            try {
                // 这里应该根据当前登录的员工ID获取个人信息
                const profileInfo = document.getElementById('profileInfo');
                let html = '<table class="data-table"><tbody>';
                html += '<tr><td><strong>员工ID</strong></td><td>EMP001</td></tr>';
                html += '<tr><td><strong>姓名</strong></td><td>张三</td></tr>';
                html += '<tr><td><strong>部门</strong></td><td>技术部</td></tr>';
                html += '<tr><td><strong>性别</strong></td><td>男</td></tr>';
                html += '<tr><td><strong>年龄</strong></td><td>28</td></tr>';
                html += '<tr><td><strong>电话</strong></td><td>13800138001</td></tr>';
                html += '<tr><td><strong>入职时间</strong></td><td>2022年1月</td></tr>';
                html += '<tr><td><strong>状态</strong></td><td>在职</td></tr>';
                html += '</tbody></table>';
                profileInfo.innerHTML = html;
            } catch (error) {
                console.error('加载个人信息失败:', error);
            }
        }
        
        // 加载工资记录
        async function loadSalaryRecords() {
            try {
                // 这里应该根据当前登录的员工ID获取工资记录
                const salaryRecords = document.getElementById('salaryRecords');
                let html = '<table class="data-table"><thead><tr><th>年份</th><th>月份</th><th>基本工资</th><th>应发工资</th><th>实发工资</th><th>状态</th></tr></thead><tbody>';
                html += '<tr><td>2024</td><td>1</td><td>¥8,000</td><td>¥8,500</td><td>¥8,500</td><td>已发放</td></tr>';
                html += '<tr><td>2023</td><td>12</td><td>¥8,000</td><td>¥8,500</td><td>¥8,500</td><td>已发放</td></tr>';
                html += '<tr><td>2023</td><td>11</td><td>¥8,000</td><td>¥8,500</td><td>¥8,500</td><td>已发放</td></tr>';
                html += '</tbody></table>';
                salaryRecords.innerHTML = html;
            } catch (error) {
                console.error('加载工资记录失败:', error);
            }
        }
        
        // 加载考勤记录
        async function loadAttendanceRecords() {
            try {
                // 这里应该根据当前登录的员工ID获取考勤记录
                const attendanceRecords = document.getElementById('attendanceRecords');
                let html = '<table class="data-table"><thead><tr><th>年份</th><th>月份</th><th>出勤天数</th><th>请假天数</th><th>出勤率</th></tr></thead><tbody>';
                html += '<tr><td>2024</td><td>1</td><td>22</td><td>0</td><td>100%</td></tr>';
                html += '<tr><td>2023</td><td>12</td><td>21</td><td>1</td><td>95.5%</td></tr>';
                html += '<tr><td>2023</td><td>11</td><td>22</td><td>0</td><td>100%</td></tr>';
                html += '</tbody></table>';
                attendanceRecords.innerHTML = html;
            } catch (error) {
                console.error('加载考勤记录失败:', error);
            }
        }
        
        // 加载部门信息
        async function loadDepartmentInfo() {
            try {
                // 这里应该根据当前登录的员工ID获取部门信息
                const departmentInfo = document.getElementById('departmentInfo');
                let html = '<table class="data-table"><tbody>';
                html += '<tr><td><strong>部门ID</strong></td><td>DEPT001</td></tr>';
                html += '<tr><td><strong>部门名称</strong></td><td>技术部</td></tr>';
                html += '<tr><td><strong>部门负责人</strong></td><td>李经理</td></tr>';
                html += '<tr><td><strong>部门电话</strong></td><td>010-12345678</td></tr>';
                html += '<tr><td><strong>部门邮箱</strong></td><td>tech@company.com</td></tr>';
                html += '<tr><td><strong>部门地址</strong></td><td>北京市朝阳区科技园区</td></tr>';
                html += '<tr><td><strong>部门预算</strong></td><td>¥1,000,000</td></tr>';
                html += '</tbody></table>';
                departmentInfo.innerHTML = html;
            } catch (error) {
                console.error('加载部门信息失败:', error);
            }
        }
        
        // 退出登录
        function logout() {
            localStorage.removeItem('token');
            localStorage.removeItem('role');
            localStorage.removeItem('username');
            window.location.href = 'login.html';
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 绑定导航事件
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function() {
                    const sectionId = this.dataset.section;
                    showSection(sectionId);
                });
            });
            
            // 加载初始数据
            loadOverviewData();
        });
    </script>
</body>
</html> 